<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-11-28 09:20:08
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-06-25 11:57:57
 * @FilePath: /massage2_a510/src/components/Auestionnaried/Auestionnaried.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="core">
    <!-- 第零页 -->
    <div class="detail">
      <div class="detail_desc">
        <div>问卷ID：{{ questionid ? questionid : "XXXXXX" }}</div>

        <div>
          设备型号：{{
            produce ? produce : produce == 0 ? "全部机型" : "XXXXXXX"
          }}
        </div>
        <!-- <div>程序标号：{{ phoneNumber ? phoneNumber : "XXXXXX" }}</div> -->
        <div>问卷名称：{{ questionName ? questionName : "XXXXXX" }}</div>
        <div>问卷份数：{{ fenshu ? fenshu : 0 }}</div>
        <div>赠送积分：{{ jifen ? jifen : 0 }}</div>
      </div>
    </div>
    <div class="wenjuan" v-for="(item, index) in data" :key="item.id">
      <div class="danxuan" v-if="item.questionType == 1">
        <div class="timu">问题{{ index + 1 }}：{{ item.questionContent }}</div>
        <div class="xuanxiang">
          <div
            style="margin-bottom: 2rem; margin-right: 2rem"
            v-for="(items, indexs) in item.options"
            :key="items.id"
          >
            {{ map[indexs] }}. {{ items.optionContent }} (
            {{ items.count ? items.count : 0 }} )
          </div>
        </div>
      </div>
      <div class="duoxuan" v-else-if="item.questionType == 2">
        <div class="timu">问题{{ index + 1 }}：{{ item.questionContent }}</div>
        <div class="xuanxiang">
          <div
            style="margin-bottom: 2rem; margin-right: 2rem"
            v-for="(items, indexs) in item.options"
            :key="items.id"
          >
            {{ map[indexs] }}. {{ items.optionContent }} (
            {{ items.count ? items.count : 0 }} )
          </div>
        </div>
      </div>
      <div class="tiankong" v-else>
        <div class="timu">问题{{ index + 1 }}：{{ item.questionContent }}</div>
        <el-input disabled type="text" v-model="item.answerValue"></el-input>
      </div>
    </div>
    <div class="btn">
      <div @click="returnQuestionPage" class="closePage">返回</div>
      <div @click="exceldata" class="closePage">导出Excel</div>
    </div>

    <!-- 第零页 -->
  </div>
</template>

<script>
import { questionnaireIDCope } from "@/base/api/Question";
import axios from "axios";
import { settings } from "@/config/Settings";
import Cookies from "js-cookie";
import { getDeviceMaintainList } from "@/base/api/DeviceMaintainApi";
export default {
  data() {
    return {
      selectIndex: 0,
      data: [],
      questionid: "",
      questionName: "",
      fenshu: "",
      phoneNumber: 0,
      produce: "",
      jifen: "",
      preview: {},
      vipid: "",
      //单选
      arr: [],
      map: {
        0: "A",
        1: "B",
        2: "C",
        3: "D",
        4: "E",
        5: "F",
        6: "G",
        7: "H",
        8: "I",
        9: "J",
        10: "K",
        11: "L",
        12: "M",
        13: "N",
        14: "O",
        15: "P",
        16: "Q",
        17: "R"
      }
    };
  },

  watch: {},
  created() {
    //拿到所有机型所对应的型号
    this.getpreviewData();
  },
  methods: {
    getpreviewData() {
      questionnaireIDCope(this.$route.query.id).then(res => {
        this.preview = res.data;
        this.jifen = res.data.point;
        this.fenshu = res.data.number;
        this.data = res.data.questionnaireSpecificVos;
        this.getProduct(res.data.modelId);
        this.questionid = res.data.id;
        this.questionName = res.data.questionnaireName;
        //将传递过来的统计次数加入对应的选项
        this.data.forEach((item, index) => {
          //先循环整个数组
          if (item.questionType == 1 || item.questionType == 2) {
            item.selectStatistics.forEach((item1, index1) => {
              // console.log(item1);
              item.options.forEach((item2, index2) => {
                if (item1.option == this.map[index2]) {
                  item2.count = item1.count;
                }
              });
            });
          }
        });
      });
    },
    //返回问卷调查页
    returnQuestionPage() {
      this.$router.push("/questionnaire");
    },
    //导出数据功能
    // exceldata() {
    //   exportQuestionnaireExcel(this.$route.query.id).then((res) => {
    //     console.log(res);
    //     const url = window.URL.createObjectURL(new Blob([res.data]));
    //     const link = document.createElement('a');
    //     link.href = url;
    //     link.setAttribute('download', 'member.xlsx');
    //     document.body.appendChild(link);
    //     link.click();

    //   });
    // },

    exceldata() {
      const url = `${
        process.env.NODE_ENV === "development"
          ? settings.baseUrl.dev
          : settings.baseUrl.pro
      }/api/questionnaire/exportQuestionnaireExcel/${this.$route.query.id}`;
      const config = {
        responseType: "blob",
        headers: {
          Authorization: `Bearer ${Cookies.get("accessToken")}`
        }
      };
      axios
        .get(url, config)
        .then(response => {
          // console.log(response.data);
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "member.xlsx");
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error("导出失败", error);
        });
    },
    getProduct(id) {
      getDeviceMaintainList({
        pageIndex: 1,
        pageSize: 1000,
        sortId: 1324949759328288,
        sortDirection: "DESC"
      }).then(res => {
        this.produce = res.data.items.filter(item => {
          return item.id == id;
        })[0].modelName;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.core {
  width: 600px;
  padding: 0 40px 40px 40px;
  border: 1px solid rgba(61, 58, 58, 0.3);
  height: 75vh;
  overflow-y: scroll;
}
.title {
  color: black;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}
.wenjuan {
  margin-top: 3rem;

  .timu {
    color: black;
    font-size: 1rem;
  }
  .xuanxiang {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
/deep/ .el-input__inner {
  margin-top: 3rem;
}
/deep/ .el-button {
  width: 10rem;
  margin-top: 4rem;
}
.Rewardreminder {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8%;
  width: 50%;
  height: 50%;
  background-color: rgb(28, 21, 78);
  color: white;
  position: fixed;
  top: 20%;
  left: 25%;
  z-index: 10000;
  font-size: 1.3rem;
}

/deep/ .el-checkbox .is-checked {
  background-color: #fff;
}
.btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  .closePage {
    cursor: pointer;
    width: 100px;
    height: 40px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1791d5;
  }
}

.detail {
  .detail_title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
  }
  .detail_desc {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 600;
    div {
      margin-right: 20px;
      margin-top: 10px;
    }
  }
}
</style>
